<template>
	<view class="flex-row" style="width: 100%;justify-content: space-between;padding: 2%;">
		<view class="flex-row" style="width: 45%;align-items: center;">
			<text class="width8" v-bind:style="{ color: color1}">{{title1}} : </text>
			<u-input v-model="value1" type="number" :border="true" height="50" :custom-style="{color: color1}" @input="notifyFather1"/>
		</view>
		<view class="flex-row" style="width: 45%;align-items: center;">
			<text class="width8" v-bind:style="{ color: color2}">{{title2}} : </text>
			<u-input v-model="value2" type="number" :border="true" height="50" :custom-style="{color: color2}" @input="notifyFather2"/>
		</view>
	</view>
</template>

<script>
	export default {
		name: "horizontalForm",
		props: {
			title1: {
				type: String,
				default: ''
			},
			title2: {
				type: String,
				default: ''
			},
			titleValue1: {
				type: Number,
				default: 0
			},
			titleValue2: {
				type: Number,
				default: 0
			},
			color1: {
				type: String,
				default: ''
			},
			color2: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				value1: 0,
				value2: 0
			}
		},
		mounted() {
			this.value1 = this.titleValue1;
			this.value2 = this.titleValue2;
		},
		methods: {
			notifyFather1() {
				if (this.value1 == ""){
					this.value1 = "0"
				}
				let obj = {
					type: this.title1,
					value1: this.value1
				}
				this.$emit('messageHandler', obj);
			},
			notifyFather2() {
				if (this.value2 == ""){
					this.value2 = "0"
				}
				let obj = {
					type: this.title2,
					value2: this.value2
				}
				this.$emit('messageHandler', obj);
			}
		}
	}
</script>

<style>

</style>
